
{% extends 'lr_base.html' %}
{% block title %}
    <a href="#" class="done">登录</a>|
    <a href="#">supureme</a>
{% endblock %}
{% block content %}
    <form>
    {% csrf_token %}
    {% for field in from %}
        <div class="form-group">
            <label for="{{ field.auto_id }}">{{ field.label }}</label>
            {{ field }}
            <span class="error pull-right"></span>
        </div>
    {% endfor %}
    <div class="form-group">
        <label for="avatar">头像
            <img id="avatar_img" width="60" height="60" src="/static/blog/img/default.png" alt="">
        </label>
        <input type="file" id="avatar" name="avatar">

    </div>
    <div class="form-group" style="margin-top: 15px">
        <input type="button" class="btn btn-success reg_btn center-block" value="提交"><span
            class="error"></span>
    </div>
    </form>

    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script>
        // 头像
        $('#avatar').change(function () {
            // 获取用户选中的文件对象
            var file_obj = $(this)[0].files[0];
            // 获取文件对象路径
            var reader = new FileReader();
            reader.readAsDataURL(file_obj);
            // 修改img的src属性，src=文件对象的路径
            reader.onload = function () {
                $("#avatar_img").attr('src', reader.result)
            };

        });
        // 基于Ajax提交数据
        $('.reg_btn').click(function () {
            var formdata = new FormData();
            var request_data = $('form').serializeArray();
            console.log(request_data);
            $.each(request_data, function (index, data) {
                formdata.append(data.name, data.value)
            });
            {#formdata.append('user', $('#id_user').val());#}
            {#formdata.append('pwd', $('#id_pwd').val());#}
            {#formdata.append('re_pwd', $('#id_re_pwd').val());#}
            {#formdata.append('email', $('#id_email').val());#}
            formdata.append('csrfmiddlewaretoken', $('[name ="csrfmiddlewaretoken"]').val());
            formdata.append('avatar', $('#avatar')[0].files[0]);

            $.ajax({
                url: '',
                type: 'post',
                data: formdata,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                    if (data.user) {
                        // 注册成功
                        location.href = "/login/"

                    }
                    else {
                        // 清空错误信息
                        $('span.error').html('');
                        $('.form-group').removeClass('has-error');
                        // 展示此次提交的错误信息
                        $.each(data.msg, function (field, error_list) {
                            if (field == "__all__") {
                                $('#id_re_pwd').next().html(error_list[0]).parent().addClass('has-error')
                            }
                            console.log(field, error_list);
                            $('#id_' + field).next().html(error_list[0]).parent().addClass('has-error');
                            {#$('#id_'+field).parent().addClass('has-error');#}

                        })
                    }
                }
            })
        });
    </script>



{% endblock %}



